<template>
  <div class="marketing-coupon-container">
    <div class="title">营销应用管理</div>
    <!--免费应用-->
    <div>
      <h2>已开通的应用</h2>
      <div class="grid">
        <div class='item' v-for="item in isOpen" :key='item.name'>
          <img class="item-icon" :src='item.icon'>
          <div class="item-content">
            <div class="item-name">{{item.name}}</div>
            <div class="item-label">{{item.label}}</div>
          </div>
          <router-link :to='item.router' class="item-go">使用</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { merchantPlugin } from '@/api/marketing'
export default {
  name: 'coupon',
  components: {
  },
  data() {
    return {
     isOpen: [
       {name: '优惠券', label: '店铺,商品优惠券', icon: require('@/assets/images/应用营销/yhq.png'), router: '/marketing/coupon'},
       {name: '购物返现', label: '付款金额返现到余额', icon: require('@/assets/images/应用营销/gwfx.png'), router: '/marketing/buyCashback'},
       {name: '签到', label: '每日签到送积分', icon: require('@/assets/images/应用营销/qd.png'), router: '/marketing/singin'},
       {name: '订阅信息', label: '发送订单通知信息', icon: require('@/assets/images/应用营销/dyxx.png'), router: '/marketing/apptamplate'},
       {name: '充值', label: '充值到余额', icon: require('@/assets/images/应用营销/cz.png'), router: '/marketing/pay'},
       {name: '满减', label: '满金额减优惠', icon: require('@/assets/images/应用营销/mj.png'), router: '/marketing/reduction'},
       {name: '新人专享', label: '新人专享商品', icon: require('@/assets/images/应用营销/xrzx.png'), router: '/marketing/recuits'},
       {name: '积分商城', label: '积分兑换礼品', icon: require('@/assets/images/应用营销/jfsc.png'), router: '/marketing/score'},
       {name: '拼团', label: '2人及多人拼团', icon: require('@/assets/images/应用营销/pt.png'), router: '/marketing/assemble'},
       {name: '秒杀', label: '显示优惠秒杀', icon: require('@/assets/images/应用营销/ms.png'), router: '/marketing/seckill'},
       {name: '预约送货', label: '预约送货时间', icon: require('@/assets/images/应用营销/yysh.png'), router: '/marketing/estimated'},
       {name: '会员PLUS', label: '付费会员卡', icon: require('@/assets/images/应用营销/hykPLUS.png'), router: '/vip/pay'},
     ],
     json: {}
    }
  },
}
</script>

<style lang="scss" scoped>
.marketing-coupon-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.header{
  span{
    font-size: 14px;
    color: #99a1ac;
  }
}
.title{
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 5px;
}
h2{
  display: flex;
  padding: 20px 0;
}
h2::before{
  content: 'a';
  display: inline-block;
  width: 2px;
  color: #2B8EFF;
  white-space: nowrap;
  overflow: hidden;
  background: #2B8EFF;
  margin-right: 6px;
}
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 24px;
  grid-column-gap: 36px;
}
.item{
  padding: 18px 11px 16px 18px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 270px;
  background: #f7f7f7;
  position: relative;
  .item-icon{
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .item-content{
    flex: 1;
    .item-name{

    }
    .item-label{

    }
  }
  .item-go{
    position: absolute;
    right: 11px;
    top: 11px;
    color: #7ab8fb;
    border: 1px solid #7ab8fb;
    border-radius: 2px;
    padding: 4px 10px 5px 8px;
    line-height: 14px;
    font-size: 14px;
  }
  .no{
    color: red;
    border-color: red;
  }
}
</style>
